import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Form, Card, Input, Radio, Select, Button, message, Icon, InputNumber, Popover } from 'antd'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
import 'styles/setting/workflow/new-workflow.scss'
import LanguageInput from 'components/template/language-input/language-input'
import workflowUtil from 'containers/setting/new-workflow/utils'

class NewNodeApproveMan extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      ruleApprovalNodeOID: '',
      basicInfo: null,
      selectApprovalRule: 5003,
      showDepManager: false, //【包含申请人】是否选择部门经理
      formFieldList: null, //表单条件字段 字段类型(100默认, 101文本, 102整数, 103日期, 104浮点数, 105日期, 106值列表, 107GPS, 108布尔)
      formFieldCostCenterList: null, //审批条件为成本中心属性字段
      isRuleInEdit: false, //是否有审批条件处于编辑状态
      approvalOvertimeDay: '0-0',//审批超时时间 例0天0时
    }
  }

  componentDidMount() {
    let {selectApprovalRule} = this.state;
    if(this.props.basicInfo.selfApprovalRule === 5003 || this.props.basicInfo.selfApprovalRule === 5005){
      selectApprovalRule = this.props.basicInfo.selfApprovalRule;
    }
    this.setState({
      ruleApprovalNodeOID: this.props.basicInfo.ruleApprovalNodeOID,
      selectApprovalRule: selectApprovalRule,
      basicInfo: this.props.basicInfo,
      approvalOvertimeDay: this.props.basicInfo.approvalOvertimeDay,
      showDepManager: !(this.props.basicInfo.selfApprovalRule === 5001 || this.props.basicInfo.selfApprovalRule === 5002)
    })
  }


  onChange = (e, attr) => {
    let { basicInfo } = this.state;
    basicInfo[attr] = e;
    this.setState({ basicInfo });
    this.props.onChangeAttr(e, attr);
  };


  componentWillReceiveProps(nextProps) {
    let {selectApprovalRule} = this.state;
    if (this.state.ruleApprovalNodeOID !== nextProps.basicInfo.ruleApprovalNodeOID || nextProps.basicInfo.ruleApprovalNodeCopy) {
      if(nextProps.basicInfo.selfApprovalRule === 5003 ||nextProps.basicInfo.selfApprovalRule === 5005){
        selectApprovalRule = nextProps.basicInfo.selfApprovalRule;
      }
      let selfApprovalRuleFlag = (nextProps.basicInfo.selfApprovalRule === 5001 || nextProps.basicInfo.selfApprovalRule === 5002);
      this.setState({
        basicInfo: nextProps.basicInfo,
        ruleApprovalNodeOID: nextProps.basicInfo.ruleApprovalNodeOID,
        selectApprovalRule: selectApprovalRule,
        showDepManager: !selfApprovalRuleFlag,
      }, () => {
        this.props.form.resetFields()
      })
      this.setState({
        approvalOvertimeDay: nextProps.basicInfo.approvalOvertimeDay
      })
    }
  }

  onChangeDay = (res) => {
    if (res > 999) {
      res = 999;
    }
    if (res === '') {
      res = 0;
    }
    let { approvalOvertimeDay } = this.state;
    let approvalOver = (approvalOvertimeDay && approvalOvertimeDay.split('-')) || [0, 0];
    this.setState({
      approvalOvertimeDay: res + '-' + approvalOver[1]
    }, () => {
      this.props.onChangeAttr(this.state.approvalOvertimeDay, 'approvalOvertimeDay')
    });
  };

  onChangeTime = (res) => {
    if (res > 23) {
      res = 23;
    }
    if (res === '') {
      res = 0;
    }
    let { approvalOvertimeDay } = this.state;
    let approvalOver = (approvalOvertimeDay && approvalOvertimeDay.split('-')) || [0, 0];
    this.setState({
      approvalOvertimeDay: approvalOver[0] + '-' + res
    }, () => {
      this.props.onChangeAttr(this.state.approvalOvertimeDay, 'approvalOvertimeDay')
    })
  };

  handleRemarkChange = (value,i18n) => {
    this.onChange(value,'remark');
    this.onChange({ remark: i18n }, 'i18n');
  };

  render() {
    const { language,formInfo } = this.props;
    const { approvalOvertimeDay, basicInfo } = this.state;
    let {selectApprovalRule} = this.state;
    const formItemLayout = {
      labelCol: { span: language.code === 'zh_cn' ? 4 : 6 },
      wrapperCol: { span: language.code === 'zh_cn' ? 20 : 18 },
    };
    return (
      <div>
        {basicInfo && basicInfo.ruleApprovalNodeOID && <div className='node-approve-man'>
          <FormItem {...formItemLayout} label={messages('setting.key1372'/*节点名称*/)} colon={false}>
            <LanguageInput
              name={basicInfo.remark }
              width={300}
              inpRule={workflowUtil.getInpRule(100, this.props.languageList)}
              i18nName={basicInfo.i18n && basicInfo.i18n.remark}
              isEdit
              nameChange={this.handleRemarkChange}
            />
          </FormItem>
          <FormItem {...formItemLayout} label={messages('setting.key1385'/*会签规则*/)} colon={false}>
            <RadioGroup value={basicInfo.countersignRule} onChange={e => { this.onChange(e.target.value, 'countersignRule')}}>
              <Radio value={3001}>{messages('setting.key1386'/*所有人审批通过*/)}</Radio>
              <Radio value={3002}>{messages('setting.key1387'/*任意人审批通过*/)}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem {...formItemLayout} label={messages('setting.key1388'/*包含申请人*/)} colon={false}>
            <RadioGroup value={ basicInfo.selfApprovalRule} onChange={e => {
              this.onChange(e.target.value, 'selfApprovalRule')
            }}>
              <Radio value={5002}>{messages('setting.key1384'/*不跳过*/)}</Radio>
              <Radio value={5001}>{messages('setting.key1383'/*跳过*/)}</Radio>
              {/* 5005 本级、5003上级 */}
              <Radio value={selectApprovalRule}>
                {messages('setting.key1389'/*转交部门经理*/)}
                {basicInfo.selfApprovalRule !== 5002 && basicInfo.selfApprovalRule !== 5001 && basicInfo.selfApprovalRule !== 5006&& (
                  <Select className="approval-select" value={basicInfo.selfApprovalRule}
                          onChange={value => {
                            this.setState({selectApprovalRule:value})
                            this.onChange(value, 'selfApprovalRule')
                          }}>
                    <Option value={5005}>{messages('setting.key1390'/*本级*/)}</Option>
                    <Option value={5003}>{messages('setting.key1391'/*上级*/)}</Option>
                  </Select>
                )}
              </Radio>
              <Radio value={5006}>{messages('setting.key2056')/*转交直属领导*/}</Radio>
            </RadioGroup>
          </FormItem>
          {/*报销单的formType以3开头，只有报销单才可以选择是否允许修改费用*/}
          {formInfo.formType && String(formInfo.formType).charAt(0) === '3' && (
            <FormItem {...formItemLayout} label={messages('setting.key1392'/*允许修改费用*/)} colon={false}>
              <RadioGroup value={basicInfo.invoiceAllowUpdateType || 0}
                          onChange={e => {this.onChange(e.target.value, 'invoiceAllowUpdateType')}}>
                <Radio value={1}>{messages('setting.key1393'/*是*/)}</Radio>
                <Radio value={0}>{messages('setting.key1394'/*否*/)}</Radio>
              </RadioGroup>
            </FormItem>
          )}
          <FormItem {...formItemLayout} label={messages('setting.key1634')/*审批超时*/} colon={false}>
            <Popover overlayStyle={{ maxWidth: 300 }}
                     content={messages('setting.key1635')/*审批人收到审批任务，超过当前时长定义未处理视为超时，可配合单据提醒功能向审批人发送消息提醒；当超时定义为0时，当前审批环节永不超时。*/}
                     trigger="hover">
              <Icon type="info-circle" className='default-color-font' style={{ marginRight: '10px' }}/>
            </Popover>
            <InputNumber min={0}
                         max={999}
                         value={approvalOvertimeDay ? Number(approvalOvertimeDay.split('-')[0]) : 0}
                         onChange={this.onChangeDay}/>{messages('setting.key753')/*天*/}
            <InputNumber style={{ marginLeft: 10 }}
                         min={0}
                         max={23}
                         value={approvalOvertimeDay ? Number(approvalOvertimeDay.split('-')[1]) : 0}
                         onChange={this.onChangeTime}/>{messages('setting.key1654')/*小时*/}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('setting.key1799')/*允许修改单据*/} colon={false}>
            <RadioGroup value={basicInfo.editable || false} onChange={e => {this.onChange(e.target.value, 'editable')}}>
              <Radio value={true}>{messages('setting.key1393'/*是*/)}</Radio>
              <Radio value={false}>{messages('setting.key1394'/*否*/)}</Radio>
            </RadioGroup>
          </FormItem>
        </div>}
      </div>
    )
  }
}

NewNodeApproveMan.propTypes = {
  basicInfo: React.PropTypes.object,
  formInfo: React.PropTypes.object,
  basicInfoSaveHandle: React.PropTypes.func, //基本信息保存成功的回调
  modalVisibleHandle: React.PropTypes.func, //用于添加审批人modal是否显示的传参
  onChangeAttr: React.PropTypes.func,//更改信息的回调 值&属性名
};

NewNodeApproveMan.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList,
    language: state.main.language
  }
}

const wrappedNodeApproveMan = Form.create()(NewNodeApproveMan);

export default connect(mapStateToProps)(wrappedNodeApproveMan)
